<template>
	<transition name="fade" mode="in-out">
	
		<div id="pl" v-if="show">
			<div class="shang">
				<div v-if="playMusic" class="poster">
					<i class="iconfont icon-jiantou8" @click="show1"></i>
					<img :src="playMusic.pic_radio" />
					<div class="shadow">
						<i class="iconfont icon-iconfonterji">66万次播放</i>
					</div>
				</div>
				<div class="action">
					<div class="geming">
						<p>{{songTitle}}</p>
						<span>{{singer}}</span>
					</div>
					<div class="gongneng">
						<i class="iconfont icon-geci"></i>
						<i class="iconfont icon-xiazai1"></i>
						<i class="iconfont icon-xin1" @click="xin" v-if="yansep"></i>
						<i class="iconfont icon-xin" @click="xin2" v-else-if="!yansep"></i>
						<i class="iconfont icon-duihuakuang"></i>
						<i class="iconfont icon-zhuanfa"></i>
						<i class="iconfont icon-shenglvehao"></i>
					</div>
					<div class="x"></div>
				</div>
				<Recommend class="reco"></Recommend>
			</div>
			<div class="xia">
				<i class="iconfont " :class="curState" @click="xunhuan"></i>
				<i class="iconfont icon-shangyishoumianxing" @touchstart="start2" @touchend="end2" :style="{color:co}"></i>
				<i class="iconfont icon-bofang1" @click="bofang" v-if="zhuangtai"></i>
				<i class="iconfont icon-zanting2" @click="zanting" v-else-if="!zhuangtai"></i>
				<i class="iconfont icon-xiayishou1" @touchstart="start3" @touchend="end3" :style="{color:col}"></i>
				<i class="iconfont icon-yinleliebiao"></i>
			</div>

		</div>
	</transition>
</template>

<script>
	import jsonp from 'jsonp';
	import Recommend from '../views/Recommend'
	export default {
		name: "PlayMusic",
		data() {
			return {
				playMusic: "",
				titleId: "",
				co: "",
				col: "",
				songTitle: "",
				singer: "",
				show: true,
				yansep: true,
				curState: "icon-xunhuan",
				classIndex: 0,
				zhuangtai: true,
			}
		},
		props: ["musicId"],
		created() {
//			console.log(this.musicId)
			if(!this.PlayMusic) {
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.song.play&songid=" + this.musicId, null, (err, res) => {
					if(!err) {
//						console.log(res);
						let posterB = res.songinfo;
						this.playMusic = posterB;
					} else {
						console.log(err);
					}
				})
			};
			jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.song.play&songid=" + this.musicId, null, (err, res) => {
				if(!err) {
					let titleid = res.songinfo;
					this.titleId = titleid;
//					console.log(res)
					this.songTitle = titleid.title;
					this.singer = titleid.author;

				} else {
					console.log(err);
				}
			})

			//			console.log(this.playMusic)
		},
		components: {
			Recommend
		},
		methods: {
			show1() {
				this.show = !this.show;
				this.$router.go(-1);

			},
			start2() {
				this.co = "skyblue";
			},
			end2() {
				this.co = "#333333";
			},
			start3() {
				this.col = "skyblue";
			},
			end3() {
				this.col = "#333333";
			},
			xunhuan() {
				this.classIndex++;
				if(this.classIndex >= 3) {
					this.classIndex = 0;
				}
				var arr = ["icon-xunhuan", "icon-bofangye-caozuolan-suijibofang", "icon-danquxunhuan"]
				this.curState = arr[this.classIndex];
			},

			xin() {
				this.yansep = !this.yansep;
			},
			xin2() {
				this.yansep = !this.yansep;
			},
			bofang() {
				this.zhuangtai = !this.zhuangtai;
			},
			zanting() {
				this.zhuangtai = !this.zhuangtai;
			}
		}
	};
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	html,
	body {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	#pl {
		background: white;
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 100;
		.shang {
			width: 100%;
			height: 100%;
			overflow: auto;
			box-sizing: border-box;
			.reco {
				margin-bottom: 1*1.65rem;
			}
			.poster {
				width: 100%;
				position: relative;
				.icon-jiantou8 {
					font-size: 0.5rem;
					position: absolute;
					top: 1rem;
					left: 0.33rem;
					color: gray;
				}
				img {
					width: 100%;
				}
				.shadow {
					width: 100%;
					height: 1.4*1.65rem;
					background: rgba(0, 0, 0, .4);
					position: absolute;
					bottom: 0;
					i {
						font-size: 0.25*1.65rem;
						color: #dcdad8;
						position: absolute;
						right: 0.8*1.65rem;
						bottom: 0.3*1.65rem;
					}
				}
			}
			.action {
				width: 100%;
				.geming {
					width: 100%;
					height: 1*1.65rem;
					line-height: 0.5*1.65rem;
					text-align: center;
					font-size: 0;
					margin-top: 0.6*1.65rem;
					p {
						font-size: 0.29*1.65rem;
					}
					span {
						font-size: 0.19*1.65rem;
						color: #666666;
					}
				}
				.gongneng {
					width: 100%;
					height: 1*1.65rem;
					line-height: 1*1.65rem;
					font-size: 0;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 0 0.3*1.65rem;
					.iconfont {
						font-size: 0.38*1.65rem;
						color: #999999;
					}
					.icon-xin {
						font-size: 0.38*1.65rem;
						color: red;
					}
				}
			}
			.x {
				width: 100%;
				height: 0.16*1.65rem;
				background: #f5f5f5;
			}
		}
		.xia {
			width: 100%;
			height: 1*1.65rem;
			line-height: 1*1.65rem;
			font-size: 0;
			display: flex;
			justify-content: space-between;
			padding: 0 0.3*1.65rem;
			position: absolute;
			bottom: 0;
			box-sizing: border-box;
			background: white;
			.iconfont {
				font-size: 0.34*1.65rem;
				color: #333333;
			}
			.icon-bofangye-caozuolan-suijibofang {
				font-size: 0.34*1.65rem;
			}
			.icon-bofang1 {
				font-size: 0.8*1.65rem;
			}
			.icon-zanting2 {
				font-size: 0.8*1.65rem;
			}
		}
	}
	
	.fade-leave-active {
		transition: all .5s;
		transform: translateY(0);
	}
	
	.fade-leave-to {
		transform: translateY(100%);
	}
	
	
</style>